<template>
    <n-card title="最新竞赛" style="width: 300px">
        <template #header-extra><n-button text type="info" @click="link2contest"> 更多>></n-button></template>
        <n-space vertical v-for="contest in contests" :key="contest.contest_id" size="large">
            <n-space align="center" justify="space-between">
                <n-button text @click="link2contestnum(contest.contest_id)" size="large">
                    {{ contest.contest_id }}
                </n-button>
                <n-button text @click="link2contestnum(contest.contest_id)" size="large">
                    {{ contest.name }}
                </n-button>
            </n-space>
        </n-space>
    </n-card>
</template>

<script lang="ts">
import { contestsViews } from "@/models/views";
import { toGetLatestContest } from "@/utils/views";
import { defineComponent } from "@vue/runtime-core";
import { ref } from "vue";

export default defineComponent({
    created(){
        this.setContests();
    },
    data(){
        return {
            contests: ref<contestsViews[]>()
        };
    },
    methods: {
        link2contestnum(num: number){
            this.$router.push('/contests/' + num);
            console.log(num);
        },
        link2contest(){
            this.$router.push('/contests');
        },
        async setContests(){
            const data = await toGetLatestContest();
            console.log(data);
            if(data){
                this.contests = data;
            }
        }
    }

})
</script>